<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    
    <h:head>
        <title>Meteocal | New event</title>
        <h:outputStylesheet name="css/style.css" />
    </h:head>
    
    <h:body>
        <div id="container">
            
            <div id="sidebar">
                <h:form>
                    <p:poll interval="15" listener="#{notificationCheckBean.check()}" />
                    <p:menu model="#{menuBean.model}" style="min-height: 615px;"/>
                </h:form>                      
            </div>

            <div id="content">
                <h:form id="registrationform">
                    <p:growl id="messages"  life="7000" showDetail="true" globalOnly="true" autoUpdate="true"/>
                    <p:panel styleClass="default" style="min-height: 600px;">
                        <h:panelGrid columns="3" id="creationGrid" style="margin-bottom: 15px">
                            <p:outputLabel for="title" value="Title" style="font-style: italic"/>
                            <p:inputText id="title" value="#{newEventBean.event.title}" required="true">
                                <p:ajax update="titlemsg"/>
                            </p:inputText>
                            <p:message id="titlemsg" for="title" />
                            <p:outputLabel for="location" value="Location" style="font-style: italic"/>
                            <p:inputText id="location" value="#{newEventBean.location}" required="true">
                                <p:ajax update="locationmsg"/>
                            </p:inputText>
                            <p:message id="locationmsg" for="location" />
                            <p:outputLabel for="popup" value="Date:" style="font-style: italic"/>
                            <p:calendar id="popup" value="#{newEventBean.event.data}" required="true">
                                <p:ajax update="datemsg" />
                            </p:calendar>
                            <p:message id="datemsg" for="popup" />
                            <p:outputLabel for="beginTime" value="Begin time " style="font-style: italic"/>
                            <p:calendar id="beginTime" value="#{newEventBean.begin}" pattern="HH:mm" timeOnly="true" required="true">
                                <p:ajax update="beginTimemsg" />
                            </p:calendar>
                            <p:message id="beginTimemsg" for="beginTime" />
                            <p:outputLabel for="endTime" value="End time " style="font-style: italic"/>
                            <p:calendar id="endTime" value="#{newEventBean.end}" pattern="HH:mm" timeOnly="true" required="true"  minHour="#{newEventBean.begin.hours}" minMinute="#{newEventBean.begin.minutes}">
                                <p:ajax update="endTimemsg" />
                            </p:calendar>
                            <p:message id="endTimemsg" for="endTime" />
                            <p:outputLabel value="Description " style="font-style: italic"/>
                            <p:inputTextarea id="activity" rows="5" cols="60" autoResize="false" value="#{newEventBean.event.activity}" required="false" maxlength="244" />
                            <br/>
                            <p:outputLabel value="Outdoor " style="font-style: italic"/>
                            <p:selectBooleanCheckbox value="#{newEventBean.event.outdoor}"/>
                            <br/>
                            <p:outputLabel value="Private " style="font-style: italic"/>
                            <p:selectBooleanCheckbox  value="#{newEventBean.event.privatee}"/>
                            <br/>
                            <p:outputLabel value="Participants " style="font-style: italic"/>
                             <p:scrollPanel style=" width:650px;height:50px">
                                <p:selectManyCheckbox styleClass="selectManyListbox" id="listUsers" value="#{newEventBean.participants}" >
                                    <f:selectItems value="#{newEventBean.users}" var="c" itemLabel="#{c.email}" itemValue="#{c.email}"/>
                                   
                                </p:selectManyCheckbox>
                            </p:scrollPanel>
                            <br/><br/>
                        </h:panelGrid>
                        <br/>
                        <p:button id="cancel" value="CANCEL" outcome="home" icon="ui-icon-closethick" style="alignment-adjust: central"/>
                        &nbsp; &nbsp;
                        <p:commandButton id="submit" value="SAVE" ajax="false" action="#{newEventBean.createEvent()}" update="title,location,popup,beginTime,endTime" icon="ui-icon-check" style="alignment-adjust: central"/>
                    </p:panel>
                </h:form>
            </div>

        </div>
    </h:body>
</html>